<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-input v-model="search" placeholder="输入商品编号查询" prefix-icon="el-icon-search" clearable></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="search_key(search)">查询</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData">
      <el-table-column label="Date" prop="date"></el-table-column>
      <el-table-column label="Name" prop="name"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "489671",
          name: "刘艹艹",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "10268999",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "33546",
          name: "柯震东",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "99944656",
          name: "鼠标键盘膜",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      search: ""
    };
  },
  methods: {
    search_key(search) {
      // 搜索商品编号及商品名称
      if (search == "") {
        //  如果搜索为空，就再次调用一下后台最初传递过来的 表单 方法： this.getdata()
        return;
      } else {
        var newslist = this.tableData.filter(item => {
          //搜索商品名称
          if (item.name.includes(this.search)) {
            return item;
          }
          //搜索商品编号
          if (item.date.includes(this.search)) {
            return item;
          }
        });
        this.tableData = newslist;
      }
    }
  }
};
</script>
<style lang="scss" coped>
</style>